<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <div class="app">
    <h1>我是App组件【祖先组件】</h1>
    <h2>汽车名称：{{ name }}</h2>
    <h2>汽车价格：{{ price }}</h2>
    <hr>
    <!-- Suspense：等待异步组件时渲染一些额外内容，让应用有更好的用户体验 -->
    <Suspense>
      <template v-slot:default>
        <Child></Child>
      </template>
      <template v-slot:fallback>
        <h3>稍等，加载中......</h3>
      </template>
    </Suspense>
  </div>
</template>

<script>
// import Child from "@/components/Child.vue"; // 静态引入
import {defineAsyncComponent, reactive, toRefs} from 'vue';

const Child = defineAsyncComponent(() => import('@/components/Child.vue')); // 异步引入【动态引入】

export default {
  name: 'App',
  components: {
    Child: Child
  },
  setup() {
    // 使用Vue提供的reactive
    let car = reactive({
      name: '奔驰',
      price: '50W'
    })

    return {
      ...toRefs(car)
    }
  }
}
</script>

<style>
.app {
  background: #8549da;
  padding: 20px;
}
</style>
